import React, {useContext, useState} from "react"
import {useHistory} from "react-router-dom";
import './index.scss'
import PropTypes from "prop-types"
import '../../assets/iconfont/iconfont.css'

import {Avatar, Image, Input, message, Modal, Popover} from "antd"
import Axios from "../../utils/Axios";
import logoutImg from '../../assets/images/logout.png'
import {myLoadingContext} from "../../App";

const {TextArea} = Input;

export function IsLogin(props) {
  const {msgHandleClick, src} = props
  const history = useHistory()

  const [isModalVisible, setIsModalVisible] = useState(false);
  const [addGroupVisible, setAddGroupVisible] = useState(false)
  const [groupCode, setGroupCode] = useState('')
  const [name, setName] = useState('')
  const [desc, setDesc] = useState('')
  const {setLoad} = useContext(myLoadingContext)

  const content = (
    <div className="add-btn-group">
      <span onClick={() => setIsModalVisible(true)} className="create-btn">创建考勤组</span>
      <span className="create-btn" onClick={() => setAddGroupVisible(true)}>加入考勤组</span>
    </div>
  );
  const modalOk = () => {
    setIsModalVisible(false)
    createGroup()
  }
  const modalCancel = () => {
    setName(null)
    setDesc(null)
    setIsModalVisible(false)
  }
  const addGroupByCode = async () => {
    const res = await Axios.post(`/user/joinGroup/${groupCode}`)
    if (res.data.code === 200) {
      message.success(res.data.msg, 1)
      setAddGroupVisible(false)
      setLoad(load => load + 1)
      history.replace('/main')
    } else {
      message.error(res.data.msg, 1)
    }
  }
  const createGroup = async () => {
    !name ? message.error('组名不能为空！') : function () {
      try {
        Axios.post(`/admin/group/${name ? name : '考勤组'}/${desc ? desc : '...'}/${Math.floor(Math.random() * 40) + 1}`)
          .then(res => {
            if (res.data.code === 200) {
              message.success('添加成功', 1)
              setLoad(load => load + 1)
            } else {
              message.error(res.data.msg, 2)
            }
          })
      } catch (e) {
        console.log(e)
      }
    }()
  }
  const logout = async () => {
    const res = await Axios.post(`/logout`)
    if (res.data.code === 200) {
      message.success('退出登录')
      sessionStorage.clear()
      history.push('/')
    }
  }
  return (
    <div className="islogin">
      {/*消息*/}
      <i className="iconfont" onClick={msgHandleClick}>&#xe62f;</i>
      {/*创建*/}
      <Popover placement="bottom" content={content} trigger="click">
        <i className="iconfont">&#xe889;</i>
      </Popover>

      <i className="avatar" onClick={() => history.push('/main/personal/center')}>
        {
          src ?
            <Avatar src={<Image src={src} style={{width: 32}}/>}/>
            : <Avatar style={{color: '#f56a00', backgroundColor: '#fde3cf'}}>U</Avatar>
        }
      </i>

      <img src={logoutImg} alt="下线" title="退出登录" onClick={logout} className="logout"/>

      <Modal title="创建考勤组"
             okText="创建"
             cancelText="取消"
             maskClosable={false}
             visible={isModalVisible}
             onOk={modalOk}
             onCancel={modalCancel}
      >
        <div>
          <div>
            <span>组名</span>
            <Input placeholder="组名" value={name} onChange={e => setName(e.target.value)}/>
          </div>
          <div style={{marginTop: 10}}>
            <span>写一个描述</span>
            <TextArea rows={4} style={{resize: "none"}} placeholder="考勤组描述" value={desc}
                      onChange={e => setDesc(e.target.value)}/>
          </div>
        </div>
      </Modal>
      <Modal title="加入考勤组"
             okText="加入"
             cancelText="取消"
             visible={addGroupVisible}
             onOk={addGroupByCode}
             onCancel={() => setAddGroupVisible(false)}
      >
        <Input placeholder="请输入唯一识别码" value={groupCode} onChange={e => setGroupCode(e.target.value)}/>
      </Modal>
    </div>
  )
}

IsLogin.propTypes = {
  msgHandleClick: PropTypes.func.isRequired,
  src: PropTypes.string.isRequired,
}